<template>
    <div>
        <el-container>
            <el-header>商城大型后台管理系统
                <div class="right">
                    <el-dropdown @command="loginOut">
                        <span class="el-dropdown-link">
                            欢迎vvvip用户:{{ store.getters.getUser.username }}<el-icon
                                class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="a">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside>
                    <!-- 侧边栏 -->
                    <v-nav></v-nav>
                </el-aside>
                <el-main>
                    <!-- 二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang='ts' setup>
import vNav from '../components/vNav.vue'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
let router = useRouter()
let store = useStore()

//退出登录
const loginOut = (command: string | number | object) => {
    if (command == 'a') {
        ElMessage(`click on item ${command}`)
        //清空仓库内容/缓存
        store.dispatch('changeUserInfo', false)
        //跳转登录
        router.push('/login')
    }
}

</script>
<style lang='less' scoped>
.el-header {
    background-color: #CC99FF;
    color: #fff;
    line-height: 60px;
}

.el-menu {
    border-right: none;
}
   
.el-aside {
    background-color: #9999FF;
    color: #fff;
    /* text-align: center; */
    line-height: 200px;
    height: 92.5vh;
}

.right {
    float: right;
}

.el-dropdown {
    line-height: 60px;
    color: #fff;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
}
</style>
